<template>
  <div id="404">
    <div class="_404">
        <h2 class="m-0">抱歉，页面未找到，<span>{{ countDown }}</span>s后自动跳转到
            <a href="javascript:;" @click="goHome">首页</a>
        </h2>
    </div>
  </div>
</template>

<script>
export default {
  name: "error-404",
  data() {
    return {
      countDown: 10
    }
  },
  methods: {
    goHome() {
      this.$router.push('/home')
    }
  },
  created() {
    const timer = setInterval(() => {
      this.countDown > 0 ? this.countDown-- : this.$router.push('/home')
    }, 1000)
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once('hook:beforeDestroy', () => {            
        clearInterval(timer);                                    
    })
  }
}
</script>

<style>
a {
  text-decoration: none
}

._404 {
  width: 30%;
  margin: 5rem auto;
}

._404 img {
  width: 30rem;
}

._404 a {
  color: red;
}

._404 a:hover {
  color: red;
}
</style>
